<!--
* @description 警情动画
* @author zywu
* @date 2021/04/29 14:58:11
!-->
<template>
  <div class="alarm-flash" :class="{ 'running':running }">
    <img class="bg" src="../../assets/images/spray/bg.png" />

    <!-- 水流 -->
    <div class="water">
      <img class="before" src="../../assets/images/spray/water.png" />
      <img class="after" src="../../assets/images/spray/water.png" />
    </div>
    <div class="water-vertical">
      <img class="before" src="../../assets/images/spray/water-vertical.png" />
      <img class="after" src="../../assets/images/spray/water-vertical.png" />
    </div>
    <div class="water-vertical water3">
      <img class="before" src="../../assets/images/spray/water-vertical.png" />
      <img class="after" src="../../assets/images/spray/water-vertical.png" />
    </div>

    <!-- 设备 -->
    <img class="device-bg" src="../../assets/images/spray/device.png" />
    <img class="flash-device device1" src="../../assets/images/spray/device-icon1.png" @click="goEquipment(2179782)" />
    <!-- 水流指示器 -->
    <img class="flash-device device2" src="../../assets/images/spray/device-icon2.png" @click="goEquipment(2179781)" />
    <!-- 压力变送器 -->
    <img class="flash-device device3" src="../../assets/images/spray/device-icon3.png" @click="goEquipment(2179780)" />
    <!-- 摄像头 -->
    <img class="flash-device device4" src="../../assets/images/spray/device-icon4.png" @click="goEquipment(57698)" />
    <!-- 烟感 -->
    <img class="flash-device device5" src="../../assets/images/spray/device-icon5.png" @click="goEquipment(2179779)" />
    <!-- 摄像头 -->
    <img class="flash-device device6" src="../../assets/images/spray/device-icon4.png" @click="goEquipment(57699)" />

    <!-- 喷水 -->
    <div class="spray">
      <img src="../../assets/images/spray/spray.png" />
    </div>
    <div class="spray spray2">
      <img src="../../assets/images/spray/spray.png" />
    </div>

    <!-- 视频报警 -->
    <template v-if="deviceStatus4==10">
      <img class="radar" src="../../assets/images/spray/radar-circle-alarm.png" />
      <img class="radar-fan" src="../../assets/images/spray/radar-alarm.png" />
    </template>
    <template v-if="deviceStatus4==20">
      <img class="radar" src="../../assets/images/spray/radar-circle-fault.png" />
      <img class="radar-fan" src="../../assets/images/spray/radar-fault.png" />
    </template>
    <template v-if="deviceStatus6==10">
      <img class="radar monitor2" src="../../assets/images/spray/radar-circle-alarm.png" />
      <img class="radar-fan monitor2" src="../../assets/images/spray/radar-alarm.png" />
    </template>
    <template v-if="deviceStatus6==20">
      <img class="radar monitor2" src="../../assets/images/spray/radar-circle-fault.png" />
      <img class="radar-fan monitor2" src="../../assets/images/spray/radar-fault.png" />
    </template>

    <!-- 网关 -->
    <div class="ripple gateway" v-if="deviceStatus1==10">
      <img class="before" src="../../assets/images/spray/ripple-alarm.png" />
      <img class="after" src="../../assets/images/spray/ripple-alarm.png" />
    </div>
    <div class="ripple gateway" v-if="deviceStatus1==20">
      <img class="before" src="../../assets/images/spray/ripple-fault.png" />
      <img class="after" src="../../assets/images/spray/ripple-fault.png" />
    </div>
    <!-- 烟感 -->
    <div class="ripple" v-if="deviceStatus5==10">
      <img class="before" src="../../assets/images/spray/ripple-alarm.png" />
      <img class="after" src="../../assets/images/spray/ripple-alarm.png" />
    </div>
    <div class="ripple" v-if="deviceStatus5==20">
      <img class="before" src="../../assets/images/spray/ripple-fault.png" />
      <img class="after" src="../../assets/images/spray/ripple-fault.png" />
    </div>
    <!-- 水流指示器 -->
    <div class="ripple sensor2" v-if="deviceStatus2==20">
      <img class="before" src="../../assets/images/spray/ripple-fault.png" />
      <img class="after" src="../../assets/images/spray/ripple-fault.png" />
    </div>
    <div class="ripple sensor2" v-if="deviceStatus2==10">
      <img class="before" src="../../assets/images/spray/ripple-alarm.png" />
      <img class="after" src="../../assets/images/spray/ripple-alarm.png" />
    </div>
    <div class="flash-device-status">{{deviceStatusName2}}</div>
    <!-- 压力变送器 -->
    <div class="ripple sensor3" v-if="deviceStatus3==10">
      <img class="before" src="../../assets/images/spray/ripple-alarm.png" />
      <img class="after" src="../../assets/images/spray/ripple-alarm.png" />
    </div>
    <div class="ripple sensor3" v-if="deviceStatus3==20">
      <img class="before" src="../../assets/images/spray/ripple-fault.png" />
      <img class="after" src="../../assets/images/spray/ripple-fault.png" />
    </div>
    <div class="flash-device-value">{{deviceStatusName3}}</div>

    <!-- 遮罩 -->
    <img v-if="level==2" class="mask fault" src="../../assets/images/spray/fault.png" />
    <img v-if="level>2" class="mask alarm" src="../../assets/images/spray/red-light.png" />
    <img v-if="level>3" class="mask danger" src="../../assets/images/spray/mask-red.png" />

    <!-- 信号 -->
    <img class="signal" src="../../assets/images/spray/signal.gif" />
  </div>
</template>

<script>
import util from '@/utils/util'
let statusMap = {
  0: '正常',
  10: '报警',
  20: '故障',
  40: '联动',
}
export default {
  props: {
    dataObj: {
      type: Object,
      default: function () {
        return {}
      },
    },
    deviceList: {
      type: Array,
      default: function () {
        return []
      },
    },
    alarmList: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  data() {
    return {}
  },

  components: {},

  computed: {
    // 网关
    deviceStatus1() {
      let obj = this.alarmList.filter((n) => {
        return n.deviceId == 2179782
      })[0]
      return obj ? obj.realTimeStatus : 0
    },
    // 水流指示器
    deviceStatus2() {
      let obj = this.alarmList.filter((n) => {
        return n.deviceId == 2179781
      })[0]
      return obj ? obj.realTimeStatus : 0
    },
    // 压力变送器
    deviceStatus3() {
      let obj = this.alarmList.filter((n) => {
        return n.deviceId == 2179780
      })[0]
      return obj ? obj.realTimeStatus : 0
    },
    // 摄像头
    deviceStatus4() {
      let obj = this.alarmList.filter((n) => {
        return n.deviceId == 57698
      })[0]
      return obj ? obj.realTimeStatus : 0
    },
    // 烟感
    deviceStatus5() {
      let obj = this.alarmList.filter((n) => {
        return n.deviceId == 2179779
      })[0]
      return obj ? obj.realTimeStatus : 0
    },
    // 摄像头
    deviceStatus6() {
      let obj = this.alarmList.filter((n) => {
        return n.deviceId == 57699
      })[0]
      return obj ? obj.realTimeStatus : 0
    },
    deviceStatusName2() {
      let obj =
        this.alarmList.filter((n) => {
          return n.deviceId == 2179781
        })[0] || {}
      return statusMap[obj.realTimeStatus || 0]
    },
    deviceStatusName3() {
      let obj =
        this.alarmList.filter((n) => {
          return n.deviceId == 2179780
        })[0] || {}
      return statusMap[obj.realTimeStatus || 0]
    },
    running() {
      return this.dataObj.alarmLevel == 1 ? true : false
    },
    level() {
      if (this.dataObj.alarmType == 1) {
        if (this.alarmList.length == this.deviceList.length) return 4
        if (this.alarmList.length > 0) return 3
      } else {
        if (this.dataObj.alarmLevel == 1) return 3
        if (this.dataObj.alarmLevel == 2) return 2
      }
      return 2
    },
  },

  created() {},

  mounted() {},

  methods: {
    goEquipment(id) {
      if (id == 57698 || id == 57699) {
        let row = this.deviceList.filter((n) => {
          return n.id == 2179782
        })[0]
        let videoItem = row.videoList.filter((n) => {
          return n.id == id
        })
        util.rowShowVedio(
          {
            fcFacilitiesId: row.id,
            organizationId: row.organizationId,
            serverId: row.serverId,
          },
          0,
          videoItem
        )
      } else {
        let obj =
          this.deviceList.filter((n) => {
            return n.id == id
          })[0] || {}
        this.$router.push({
          name: 'equipLink',
          params: {
            name: obj.name || '',
            refreshEquipLink: true,
          },
        })
      }
    },
  },
}
</script>
<style lang='scss'>
.alarm-flash {
  position: relative;
  width: 844px;
  height: 633px;
  font-size: 0;
  overflow: hidden;
  &.running {
    .water {
      .before {
        animation: animationWater 5s linear 0s infinite;
      }
      .after {
        animation: animationWaterAfter 5s linear 0s infinite;
      }
    }
    .water-vertical {
      .before {
        animation: animationWaterVertical 2s linear 0s infinite;
      }
      .after {
        animation: animationWaterVerticalAfter 2s linear 0s infinite;
      }
    }
    .spray {
      display: inline-block;
      img {
        animation: animationSpray 0.6s linear 0s infinite;
      }
    }
  }
  .flash-device {
    position: absolute;
    z-index: 6;
    cursor: pointer;
    object-fit: fill;
    opacity: 0.8;
    &:hover {
      opacity: 1;
    }
    &.device1 {
      bottom: 8%;
      left: 5%;
      width: 9%;
      height: 17%;
    }
    &.device2 {
      bottom: 55.5%;
      left: 12%;
      width: 10.5%;
      height: 5%;
    }
    &.device3 {
      bottom: 59%;
      left: 34%;
      width: 4.9%;
      height: 15.8%;
    }
    &.device4 {
      top: 12%;
      left: 23%;
      width: 7.2%;
      height: 9.2%;
    }
    &.device5 {
      top: 12%;
      left: 55.5%;
      width: 7.9%;
      height: 8.4%;
    }
    &.device6 {
      top: 12%;
      left: 83%;
      width: 7.2%;
      height: 9.2%;
    }
  }
  .flash-device-value {
    position: absolute;
    top: 50%;
    left: 36.5%;
    color: #11dacc;
    font-size: 14px;
    z-index: 7;
  }
  .flash-device-status {
    position: absolute;
    top: 51%;
    left: 18.5%;
    color: #11dacc;
    font-size: 14px;
    z-index: 7;
  }
  .radar {
    position: absolute;
    top: 14.4%;
    left: 20.5%;
    width: 12%;
    height: 8%;
    z-index: 3;
    &.monitor2 {
      left: 80.5%;
    }
  }
  .radar-fan {
    position: absolute;
    top: 14.4%;
    left: 22.5%;
    width: 8%;
    height: 8.3%;
    z-index: 4;
    animation: animationRotate 2s linear 0s infinite;
    &.monitor2 {
      left: 82%;
    }
  }
  .ripple {
    position: absolute;
    top: 9%;
    left: 53.5%;
    width: 12%;
    height: 12%;
    overflow: visible;
    z-index: 3;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .before {
      width: 30%;
      animation: animationRipple 2.5s linear 0s infinite;
    }
    .after {
      width: 0;
      animation: animationRipple 2.5s linear 1s infinite;
    }
    &.gateway {
      top: 68%;
      left: 3.5%;
    }
    &.sensor2 {
      top: 35%;
      left: 11.5%;
    }
    &.sensor3 {
      top: 22%;
      left: 30%;
    }
  }
  .bg {
    width: 844px;
    height: 633px;
  }
  .water {
    position: absolute;
    top: 41.2%;
    left: 5%;
    width: 90%;
    height: 1.2%;
    z-index: 1;
    overflow: hidden;
    img {
      position: absolute;
      top: 0;
      width: 100%;
    }
    .before {
      left: 0;
    }
    .after {
      left: -100%;
    }
  }
  .water-vertical {
    position: absolute;
    top: 46%;
    left: 58.8%;
    width: 3%;
    height: 26.7%;
    overflow: hidden;
    z-index: 1;
    img {
      position: absolute;
      left: 0;
      height: 100%;
    }
    .before {
      top: 0;
    }
    .after {
      top: -100%;
    }
    &.water3 {
      left: 91.4%;
    }
  }
  .device-bg {
    position: absolute;
    top: 5%;
    left: 2.5%;
    width: 94.5%;
    height: 89%;
    z-index: 2;
    object-fit: fill;
  }
  .signal {
    position: absolute;
    bottom: 26%;
    left: 7.5%;
    width: 4%;
    z-index: 2;
  }
  .spray {
    display: none;
    position: absolute;
    top: 79%;
    left: 50%;
    width: 18%;
    height: 12%;
    z-index: 3;
    text-align: center;
    &.spray2 {
      top: 79%;
      left: 83%;
    }
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: fill;
    &.alarm {
      opacity: 0;
      animation: animationAlarm 2s linear 0s infinite;
    }
    &.danger {
      animation: animationDanger 2s linear 0s infinite;
    }
  }
  @keyframes animationSpray {
    0% {
      width: 0px;
      height: 0px;
    }
    50% {
      width: 50%;
      height: 50%;
    }
    100% {
      width: 100%;
      height: 100%;
    }
  }
  @keyframes animationWater {
    0% {
      left: 0;
    }
    50% {
      left: 50%;
    }
    100% {
      left: 100%;
    }
  }
  @keyframes animationWaterAfter {
    0% {
      left: -100%;
    }
    50% {
      left: -50%;
    }
    100% {
      left: 0;
    }
  }
  @keyframes animationWaterVertical {
    0% {
      top: 0;
    }
    50% {
      top: 50%;
    }
    100% {
      top: 100%;
    }
  }
  @keyframes animationWaterVerticalAfter {
    0% {
      top: -100%;
    }
    50% {
      top: -50%;
    }
    100% {
      top: 0;
    }
  }
  @keyframes animationAlarm {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes animationDanger {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes animationRotate {
    0% {
      transform: rotate(0);
      transform-origin: center top;
    }
    50% {
      transform: rotate(180deg);
      transform-origin: center top;
    }
    100% {
      transform-origin: center top;
      transform: rotate(360deg);
    }
  }
  @keyframes animationRipple {
    0% {
      width: 30%;
      opacity: 1;
    }
    100% {
      width: 100%;
      opacity: 0.3;
    }
  }
}
</style>